.nav-box{
  position: fixed;
  width:100px;
  left:0;
  top:0;
  bottom:0;
  padding-top:50px;
}
.nav-box .nav-item{
  display:inline-block;
  width:100px;
  margin-bottom:20px;
  padding:5px 20px;
  line-height: 28px;
  color:#333;
  background-color: #272B30;color:#fff;
  vertical-align: text-bottom;
  border-radius: 0 50px 50px 0;
  text-decoration: none;
}
.nav-box .nav-item.active{background-color: #07C160;color:#fff}

.app-contetn{padding-left:200px;}

.ex8-dialog{position:fixed;background:rgba(0,0,0,0.5);left:0;right:0;top:0;bottom:0;z-index: 99;}
.ex8-dialog-demo{width:380px;height: 500px;margin:20px auto;background: #fff;overflow: hidden;}
.ex8-dialog-demo .span{background: #c3b7ff;}
.focus123{
  transform: scale(1.1);
  box-shadow: 0 0 20px green;
}
.open,.close{
  cursor: pointer;
  display: block;width:150px;line-height:40px;padding:0 20px;margin: 20px auto;border:0;background:gray;
}
.open.focus123,.close.focus123{border:0;box-shadow: none;background: #ff6600;color:#fff}

.demo{width:600px;}
.span{
  display:inline-block;
  background:#6B9DFF;
  width:100px;
  height:100px;
  margin-left:20px;
  margin-top:20px;
  transition: all .5s;vertical-align: text-bottom;position: relative;
}
.span.no{background:#ccc}
.focus{transform: scale(1.1);box-shadow: 0 0 20px blue}

.hl{display: inline-block;width: 50px;height: 30px;background-color: red;position: absolute;right:0;bottom:0;}


.btn{font-size:12px;padding:3px;background-color: #ccc;cursor: pointer;display: inline-block;margin-right:20px;}
.btn.active{background-color: darkorange;color:#fff;}

.ng-focus-scale{transform: scale(1.2);box-shadow: 0 0 20px blue}
.ng-focus-rotate{transform: rotate(90deg);background:pink;box-shadow: 0 0 20px blue}


.example4 .demo .span:nth-of-type(2){position:relative;top:-30px;}
.example4 .demo .span:nth-of-type(6){position:relative;left:-30px;}
.example4 .demo .span:nth-of-type(21){position:relative;left:-30px;}

.demo-scroll{width: 700px;height: 700px;overflow: hidden;background:#ccc}
.demo-con{width:1200px;margin-right:40px}


.example6 .demo-box {
  text-align: center;
  margin: 100px auto;
  display: flex;
  flex-direction: row;
}
.example6 .content {
  height: 600px;flex:0 0 1060px;width:1060px;
  overflow: auto;
  background-color: bisque;
}
.example6 .content .content-item {
  width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 10px;
  display: inline-block;
  background-color: #2c3e50;
  box-sizing: border-box;
  vertical-align: top;
  color: #ffffff;
}
.example6 .menu {
  flex:0 0 300px;width:300px;
  height: 600px;
  overflow: hidden;
  padding: 20px;
}
.example6 .menu .menu-item  {
  width: 200px;
  height: 100px;
  line-height: 100px;
  box-sizing: border-box;
  display: inline-block;
  background-color: #cccccc;
  margin-bottom: 10px;
}
.example6 .focus {
  transform: scale(1.1);
  border: 2px solid red;
  box-shadow: 0 0 20px red;
}

.example2-out .span:nth-of-type(7){position: relative;top:50px}



.tv-box .loading{position: fixed ;top:50%;left:50%;margin:-100px 0 0 -100px; }
.tv-box .loading img{width:200px;}
.tv-box{background: #010d19;margin-top:40px}
.tv-box .item-box{width:1180px;height:600px;margin:0 auto;overflow: hidden;padding:50px;transition: all .5s ;}
.tv-box .perspective{display: flex;perspective:2210px;width:2210px;}
.tv-box .item{
  flex:0 0 350px;transition: all 1s;
  position: relative;background:none;
}
.tv-box .item img{width:350px;height:569px;border-radius:30px;box-shadow:1px 1px 43px rgba(198, 184, 255, 0.8);border:3px solid #4a75a2;box-sizing: border-box;}
.tv-box .item .txt{text-align: center;display: inline-block;width:100%;line-height:46px;color:#fff;}
.tv-box .item:last-child{margin-right:100px;}

.tv-box .bottom-img,.nav-img{width:100%;text-align: center;}
.tv-box .focus { z-index: 99999!important;transform: none!important; box-shadow:none }
.tv-box .focus img{border-color:#c3b7ff}


.ex3 .span:nth-of-type(4){width:220px!important}




.antdform{width:500px;padding-top:100px}
.inline-block{display: inline-block;}
.ex10-content{height:190px;overflow: hidden;}
.ex10-content p{padding-left:20px;}
.ex10-content .focus{box-shadow: none;background:#ccc;transition: .2s all;transform: none;}
.antdform .ant-card{margin: 20px auto!important;height:300px;}